<!DOCTYPE HTML>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="/static/lib/html5shiv.js"></script>
<script type="text/javascript" src="/static/lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="/static/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/style.css" />
	<link rel="stylesheet" href="/static/layui/css/layui.css"  media="all">
<!--[if IE 6]>
<script type="text/javascript" src="/static/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
	<script th:src="@{/static/lib/vue.min.js}"></script>
<title>添加管理员 - 管理员管理 - H-ui.admin v3.1</title>
<meta name="keywords" content="H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<article class="page-container">
	<form class="form form-horizontal" id="form-admin-add" enctype="multipart/form-data">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>直播名称：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value=""  id="adminName" name="broadcastTitle">
			</div>
		</div>
			<!--<td th:text="${broadcast.broadcastTitle}"></td>-->
		<input id="autoflag" type="hidden" th:value="${broadcast.broadcastId}">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">直播时间：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="test-limit1" name="" placeholder="yyyy-MM-dd">
				</div>&nbsp;&nbsp;从&nbsp;&nbsp;
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="test-limit3" name="" th:placeholder="${broadcast.broadcastBegtime}">
				</div>&nbsp;&nbsp;到&nbsp;&nbsp;
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="test-limit4" name="" th:placeholder="${broadcast.broadcastEndtime}">
				</div>
			</div>
		</div>
		<div class="row cl" id="type">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>一级分类：</label>
			<div class="formControls col-xs-8 col-sm-9">
			<span class="select-box">
			<select name="typeId" id="typeId" class="select" onchange="sel(this.options[this.options.selectedIndex].value)" required="required">
				<option value="0">---请选择---</option>
				<option v-for="(item,index) in result" :value="item.typeId">{{item.typeName}}</option>
			</select>
			</span>
			</div>
		</div>
		<div class="row cl" id="subject">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>二级分类：</label>
			<div class="formControls col-xs-8 col-sm-9">
			<span class="select-box">
			<select name="subjectId" id="subjectId" class="select" required="required" >
				<option v-for="(item,index) in result" :value="item.subjectId">{{item.subjectName}}</option>
			</select>
			</span>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">是否收费：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal">
				<span class="select-box">
				<select name="broadcastState" onchange="isfree()" id="broadcastState" class="select" onclick="isfree()">
					<option value="0">是</option>
					<option value="1">否</option>
				</select>
				</span>
			</div>
		</div>
		<div class="row cl show">
			<label class="form-label col-xs-4 col-sm-2">课程价格：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" name="broadcastPrice" id="broadcastPrice" placeholder="请输入课程价格" >
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">直播封面：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="file" name="file"  required="required" onblur="getFile(file)">
			</div>
		</div>
		<div class="row cl" >
			<label class="form-label col-xs-4 col-sm-2">直播介绍：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<textarea name="broadcastIntroduction" cols="" rows="" class="textarea"  th:placeholder="${broadcast.broadcastIntroduction}" dragonfly="true" onKeyUp="$.Huitextarealength(this,100)"></textarea>
				<p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
			</div>
		</div>

	</form>
</article>

<!--_footer 作为公共模版分离出去--> 
<script type="text/javascript" src="/static/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/static/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/static/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/static/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
	function getFile(file) {

		/*（1）判断文件后缀类型*/
		var strs = new Array(); //定义一数组
		//  var pic1 = $("#file").val(); //获取input框的值，文件路径
		var pic1 = $(file).val(); //获取input框的值，文件路径
		strs = pic1.split('.'); //分成数组存储
		var suffix = strs[strs.length - 1]; //获取文件后缀

		if (suffix != 'jpg' && suffix != 'gif' && suffix != 'jpeg'&& suffix != 'png')
		{
			showErrorMsg('您选择的不是图片，请上传一个图片！')
			return false;//不是图片，做处理
		}

		/*(2)获取文件大小，以Kb为单位*/
		fileSize = file.files[0].size / 1024;
		if (fileSize > 10000) {
			showErrorMsg('您上传的大于10M，请换一个！')
			return false;//不是图片，做处理
		}

	}

$(function(){
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
	
	$("#form-admin-add").validate({
		rules:{
			adminName:{
				required:true,
				minlength:4,
				maxlength:16
			},
			password:{
				required:true,
			},
			password2:{
				required:true,
				equalTo: "#password"
			},
			sex:{
				required:true,
			},
			phone:{
				required:true,
				isPhone:true,
			},
			email:{
				required:true,
				email:true,
			},
			adminRole:{
				required:true,
			},
		},
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){

			var url;
            var broadcastId;
			var broadcastBegtime = $("#test-limit3").attr('placeholder');
			var json = {
				teacherId:[[${session.teacher.teacherId}]]
				,broadcastBegtime:$("#test-limit1").val()+" "+$("#test-limit3").val().trim()
				,broadcastEndtime:$("#test-limit1").val()+" "+$("#test-limit4").val().trim()
			};
			if(broadcastBegtime == undefined){
				url = "/broadcast/addBroadcast";
				console.log("这里是添加直播")

			}else {
				json.broadcastId = $("#autoflag").val();
                url = "/broadcast/updateBroadcast";
				console.log("这里是更改直播")
			}




			$(form).ajaxSubmit({
				type: 'post',
				url: url,
				data:json,
				async : false
				,success: function(data){
					window.parent.location.reload();
				},
                error: function(XmlHttpRequest, textStatus, errorThrown){
					layer.msg('error!',{icon:1,time:1000});
				}
			});
			var index = parent.layer.getFrameIndex(window.name);
			parent.$('.btn-refresh').click();
			parent.layer.close(index);


		}
	});
});



layui.use('laydate', function(){
	var laydate = layui.laydate;




	//获取当前时间
	var date = new Date();
	var nowDate = date.toLocaleDateString().replace(/\//g,'-');
	var beginDate = date.toLocaleTimeString('chinese', { hour12: false });

	var endDate = new Date(date.getTime()+8*60*60*1000).toLocaleTimeString('chinese', { hour12: false });



	//限定可选日期
	var ins22 = laydate.render({
		elem: '#test-limit1'
		,min: nowDate
		,max: '2080-10-14'
		,ready: function(){
			/*ins22.hint('日期可选值设定在 <br> 到 2080-10-14');*/
		}
	});


	//限定可选时间
	laydate.render({
		elem: '#test-limit3'
		,type: 'time'
		,btns: ['clear', 'confirm']
	});


	//限定可选时间
	laydate.render({
		elem: '#test-limit4'
		,type: 'time'
		,btns: ['clear', 'confirm']
	});



	//选中后的回调
	laydate.render({
		elem: '#test20'
		,done: function(value, date){
			layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
		}
	});

	//日期切换的回调
	laydate.render({
		elem: '#test21'
		,change: function(value, date){
			layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));
		}
	});

});



var app = new Vue({
	el: '#type',
	data: {
		result: []
	}
});

var subject = new Vue({
	el: '#subject',
	data: {
		result: []
	}
});


/*根据一级分类获取二级分类*/
function sel(obj) {
	$.ajax({
		url: "/subject/getSubject",
		type: "post",
		dataType: "json",
		data: {
			typeId: obj
		},
		success: function (data) {
			subject.result = data;
			console.log(subject.result)
		}
	})
}

//是否收费
function isfree() {
	var  broadcastState=$.trim($('#broadcastState').val());
	if (broadcastState=='0'){
		$("#broadcastPrice").attr("required","required")
		$(".show").css({
			"display":"block"
		})
	}
	if (broadcastState=='1'){
		$("#broadcastPrice").removeAttr("required")
		$(".show").css({
			"display":"none"
		})
	}
}
isfree()

$(function(){
	/*获取一级分类列表*/
	var getAllType = function () {
		console.log("1111")
		$.ajax({
			type: "post",
			dataType: "json",
			url: "/type/getAllType",
			success: function (data) {
				app.result = data;
			}
		})
	}
	getAllType()
});
</script> 
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>